import React,{Component} from 'react';
import { StyleSheet,  View, Text ,Image,Dimensions} from 'react-native';
import HomeScene from "./components/HomeScene";
import DetailsScene from "./components/DetailsScene";
import SettingsScene from "./components/SettingsScene";
import SettingsDetailsScene from "./components/SettingsDetailsScene";

import {Router,Stack,Scene,Tabs } from "react-native-router-flux";
import {Font,AppLoading} from 'expo';
import {Root} from 'native-base';
import TabIcon from './components/TabIcon';

import { Provider } from 'react-redux';                                                                            
import storeConfigure from './store';

const {store,persistor} = storeConfigure();
import {PersistGate} from 'redux-persist/integration/react';


const RightButton = props => {
  return (
    <View>
      <Text
        onPress={() => {
          props._increase();
        }}
      >
        右边按钮:count++
      </Text>
    </View>
  );
};
const HomeNavBar = props =>{
  return (
    <View style={{
      height:88,
      backgroundColor:"yellow",
      justifyContent:"center",
      alignItems:"center",
      paddingTop:20
    }}>
    <Image source={require('./assets/img/37.jpg')}
    style={{
      height:88,
      width:Dimensions.get('window').width,
      position:'absolute'
    }}
    />
    <Text>Home</Text>
    </View>
  )
}
export default class App extends React.Component {
  constructor(){
    super();
    this.state={
      loading:true
    }
  }
  async componentWillMount() {
    await Expo.Font.loadAsync({
      'Roboto': require('./Fonts/Roboto.ttf'),
      'Roboto_medium': require('./Fonts/Roboto_medium.ttf'),
    });
    this.setState({
      loading:false
    });

  }
  render() {
    if(this.state.loading){
      return (
        <Root>
          <AppLoading/>
        </Root>
      )
    }
    return (
      <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <Router>
          <Tabs key="tabbar"  
          activeBackgroundColor='#e5e5e5'
          inactiveBackgroundColor="#fff"
          activeTintColor="red"
          >
            <Stack key="root" title="首页" icon={TabIcon} iconName = 'home'>
            <Scene 
            key="details" 
            component={DetailsScene} 
            title="详情页" 
            backButtonTintColor='red'
            backButtonTextStyle={{backgroundColor:"#d00"}} 
            back={true} 
            navigationBarStyle={{backgroundColor:"pink"}}
            backTitle='返回'
            titleStyle={{textAlign:"center",color:"blue"}}
            renderRightButton = {RightButton}
            />
            <Scene key="home" initial component={HomeScene} title="首页" navBar={HomeNavBar}/>
      
            </Stack>

            <Stack key="setting" title="设置" icon={TabIcon} iconName = 'cog'> 
              <Scene key="settingsScene" initial component={SettingsScene} title="设置" />
              <Scene key="settingsDetailsScene"  component={SettingsDetailsScene} title="设置详情" />
            </Stack>
          </Tabs>
        </Router>
        </PersistGate>
        </Provider>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    paddingTop: 50,
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  }
});
